<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="NumberKeyboard 数字键盘"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="基础用法">
      <hips-number-keyboard
        v-model="show1"
        complete-text="完成"
        @completed="handleComplete"
        @press="handlePress"
        @delete="handleDelete"
        @delete-all="handleDeleteAll"
      />
      <hips-button
        type="primary"
        block
        @click="show1 = !show1"
      >
        基础用法
      </hips-button>
    </demo-block>
    <demo-block title="乱序键盘">
      <hips-number-keyboard
        v-model="show2"
        :in-order="false"
        complete-text="完成"
        @completed="handleComplete"
        @press="handlePress"
        @delete="handleDelete"
        @delete-all="handleDeleteAll"
      />
      <hips-button
        type="primary"
        block
        @click="show2 = !show2"
      >
        乱序键盘
      </hips-button>
    </demo-block>

    <div
      v-for="(item, index) in list"
      :key="index"
      class="list"
    >
      {{ item }}
    </div>

    <demo-block title="插件使用">
      <hips-input
        ref="hipsInput"
        v-model="input"
        placeholder="请输入，使用正序键盘"
        type="text"
        readonly
        @on-click="handleOnFocus"
      />
      <hips-input
        ref="hipsInput2"
        v-model="input2"
        placeholder="请输入，使用乱序键盘"
        type="text"
        readonly
        @on-click="handleOnFocus2"
      />

      <hips-cell
        ref="cellInput"
        :value="input3"
        title="金额"
        clickable
        @click="handleOnFocus3"
      />
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Button, Cell, Input } from '@hips/vue-ui';

export default {
  components: {    
    [Button.name]: Button,
    [Cell.name]: Cell,
    [Input.name]: Input,
  },
  mixins: [ BasicView ],
  data() {
    return {
      input: '',
      input2: '',
      input3: '',
      show1: false,
      show2: false,
      list: [],
    };
  },

  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.input = '';
      vm.input2 = '';
      for (let i = 0; i < 5; i++) {
        vm.list.push(i);
      }
    });
  },
  methods: {
    handleOnFocus() {
      this.$hips.numberKeyboard.show({
        parent: this.$refs.hipsInput,
        inOrder: true,
        zIndex: 99,
        completeText: '完成',
        onPress: this.handlePress,
        onCompleted: this.handleComplete,
        onDelete: this.handleDelete,
        onDeleteAll: this.handleDeleteAll,
      });
    },
    handleOnFocus2() {
      this.$hips.numberKeyboard.show({
        parent: this.$refs.hipsInput2,
        inOrder: false,
        completeText: '完成',
        onPress: this.handlePress2,
        onCompleted: this.handleComplete,
        onDelete: this.handleDelete2,
        onDeleteAll: this.handleDeleteAll2,
      });
    },
    handleOnFocus3() {
      this.$hips.numberKeyboard.show({
        parent: this.$refs.cellInput,
        inOrder: false,
        completeText: '完成',
        onPress: this.handlePress3,
        onCompleted: this.handleComplete,
        onDelete: this.handleDelete3,
        onDeleteAll: this.handleDeleteAll3,
      });
    },

    handleOnBlur() {
      this.$hips.numberKeyboard.hide();
    },
    handlePress(data) {
      this.$hips.toast(`click ${data}`);
      this.input = `${this.input}${data}`;
    },
    handlePress2(data) {
      this.$hips.toast(`click ${data}`);
      this.input2 = `${this.input2}${data}`;
    },
    handlePress3(data) {
      this.$hips.toast(`click ${data}`);
      this.input3 = `${this.input3}${data}`;
    },
    handleComplete() {
      console.log('complete');
      this.$hips.toast(`click complete key`);
      this.$hips.numberKeyboard.hide();
    },
    handleDelete() {
      this.$hips.toast(`click delete key`);
      this.input = this.input.substr(0, this.input.length - 1);
    },
    handleDelete2() {
      this.$hips.toast(`click delete key`);
      this.input2 = this.input2.substr(0, this.input2.length - 1);
    },
    handleDelete3() {
      this.$hips.toast(`click delete key`);
      this.input3 = this.input3.substr(0, this.input3.length - 1);
    },
    handleDeleteAll() {
      this.$hips.toast(`delete all`);
      this.input = '';
    },
    handleDeleteAll2() {
      this.$hips.toast(`delete all`);
      this.input2 = '';
    },
    handleDeleteAll3() {
      this.$hips.toast(`delete all`);
      this.input3 = '';
    },
    destroyKeyboard() {
      this.$hips.numberKeyboard.destroy();
    },
  },
};
</script>

<style lang="stylus" scoped>
.list{
  height 44px
  line-height 44px
  text-align center
  background-color white
}
</style>
